<template>
  <view>
    <up-steps :current="current" activeColor="#3889FF">
      <up-steps-item title="第1步" desc="地区选择"> </up-steps-item>
      <up-steps-item title="第2步" desc="类目选择"></up-steps-item>
      <up-steps-item title="第3步" desc="计算器"></up-steps-item>
    </up-steps>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

const props = defineProps({
  current: {
    type: [Number, String],
    default: 0,
  },
});
</script>

<style scoped lang="scss">
// :deep(.u-steps) {
//   justify-content: space-between !important;
//   .u-steps-item--row {
//     align-items: flex-start !important;
//   }
//   .u-steps-item__line {
//     left: 20rpx !important;
//     width: 312rpx !important;
//     border: 2rpx solid #a6cbff !important;
//   }
//   .u-steps-item__wrapper__circle__text {
//     display: none !important;
//   }
//   .u-steps-item {
//     flex: unset !important;
//   }
//   > view:nth-of-type(2) {
//     margin-left: 20rpx !important;
//   }
//   > view:nth-of-type(3) {
//     .u-steps-item__wrapper {
//       padding-left: 20rpx !important;
//       .u-steps-item__content {
//         .u-text {
//           width: unset !important;
//         }
//       }
//     }
//   }
//   .u-steps-item__wrapper {
//     border-radius: 50% !important;
//     background-color: transparent !important;
//     width: inherit !important;
//     padding-left: 20rpx !important;
//     width:unset !important;
//   }
//   .u-steps-item__wrapper__circle {
//     border: 4rpx solid #3889ff !important;
//     // background-color: #fff !important;
//     border-radius: 50% !important;
//   }
//   .u-text__value {
//     font-family: PingFang SC, PingFang SC;
//     font-weight: 400 !important;
//     font-size: 28rpx !important;
//     color: #909399 !important;
//     &.u-text__value--tips {
//       font-family: PingFang SC, PingFang SC;
//       font-weight: 700 !important;
//       font-size: 32rpx !important;
//       color: #303133 !important;
//       line-height: 56rpx !important;
//     }
//   }
//   .u-icon {
//     display: none !important;
//   }
// }
</style>

